<template>
    <div>
        <router-link to="/tab1">tab1</router-link>
        <router-link to="/tab2">tab2</router-link>
        <div class="box">
            <nav>11</nav>
            <nav>222</nav>
        </div>
        <div class="router-box" @animationend="animationendM"
            :class="{ 'router-box-animation-in': this.animationIn, 'router-box-animation-out': this.animationOut }">
            <transition :name="this.animationIn ? 'in' : 'out'">
                <router-view></router-view>
            </transition>
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            pshow: false,
            animationIn: false,
            animationOut: false
        }
    },
    watch: {
        '$route'(newv, oldv) {
            if (newv.name == 'tab2') {
                this.animationIn = true;
                this.animationOut = false;
            } else {
                this.animationIn = !true;
                this.animationOut = !false;
            }
        }
    },
    methods: {
        animationendM() {
            this.animationIn = false;
            this.animationOut = false;
        }
    }
}
</script>

<style scoped>
.box {
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    transform-origin: 0% 50%;
    transition: all 1s linear;
}

.box:hover {
    transform: rotateY(-90deg);
}

.box nav {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0px;
    left: 0px;
}

.box nav:nth-child(1) {
    background: gold;
    transform: rotateX(0deg);
}

.box nav:nth-child(2) {
    background: green;
    transform: rotateY(90deg) translateX(100%);
    transform-origin: 100% 50%;
}

/* .router-animation {
    animation: ra 1s linear;
}

@keyframes ra {
    0% {
        transform: rotateY(0deg);
        transform-origin: 0% 50px;
    }

    100% {
        transform: rotateY(-80deg);
        transform-origin: 0% 50px;
    }
} */

a {
    color: #333;
    text-decoration: none;
    margin: 0px 10px;
}

.router-link-active {
    color: green;
}
</style>

<style scoped>
.router-box {
    position: relative;
    transform-style: preserve-3d;
}

.router-box>>>.tab1,
.router-box>>>.tab2 {
    position: absolute;
    left: 0px;
    top: 0px;
}

.router-box-animation-in {
    transform-origin: 0% 50%;
    animation: routerBox 1s linear;
}

@keyframes routerBox {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(-90deg);
    }
}

/* 进入时 */
.in-enter-active {
    animation: moveIn 1s linear;
}

/* 进入 */
.in-enter-from {
    transform: rotateY(90deg) translateX(100%);
    transform-origin: 100% 50%;
}

/* 离开时 */
.in-leave-active {
    animation: moveOut 1s linear;
}

/* 离开 */
.in-leave-to {
    transform: rotateY(0deg);
}

@keyframes moveIn {
    0% {
        transform: rotateY(90deg) translateX(100%);
        transform-origin: 100% 50%;
    }

    100% {
        transform-origin: 100% 50%;
        transform: rotateY(90deg) translateX(100%);
    }
}

@keyframes moveOut {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(0deg);
    }
}




.router-box-animation-out {
    transform-origin: 200px 50%;
    animation: routerBox2 1s linear;
}

@keyframes routerBox2 {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(90deg);
    }
}

/* 进入时 */
.out-enter-active {
    animation: moveIn2 1s linear;
}

/* 进入 */
.out-enter-from {
    transform: rotateY(-90deg) translateX(-100%);
    transform-origin: 0% 50%;
}

/* 离开时 */
.out-leave-active {
    animation: moveOut2 1s linear;
}

/* 离开 */
.out-leave-to {
    transform: rotateY(0deg);
}

@keyframes moveIn2 {
    0% {
        transform: rotateY(-90deg) translateX(-100%);
        transform-origin: 0% 50%;
    }

    100% {
        transform: rotateY(-90deg) translateX(-100%);
        transform-origin: 0% 50%;
    }
}

@keyframes moveOut2 {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(0deg);
    }
}
</style>













<style>
.router {
    position: relative;
}

.router .tab1 {
    position: absolute;
    left: 0px;
    top: 0px;
}

.router .tab2 {
    position: absolute;
    left: 0px;
    top: 0px;
}
</style>